<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jOrgChart - A jQuery OrgChart Plugin</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
    <link rel="stylesheet" href="css/custom.css"/>
    <link href="css/prettify.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="prettify.js"></script>
    
    <!-- jQuery includes -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    
    <script src="jquery.jOrgChart.js"></script>

    <script>
    jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : false
        });
    }); 
    </script>
  </head>

  <body onLoad="prettyPrint();">
    
    
    <ul id="org" style="display:none">
    <li class="user">
       ???<br>
	   ?:50000<br>
	   ?:30000
       <ul> 
         <li class="user">??<br>10000
		   <ul>
             <li class="user">??<br>10000
			   <ul>
			      <li class="user">???<br>10000
				    <ul>
			          <li class="BeautyShop">?????<br>10000</li>
			        </ul>
			      <li class="BeautyShop">?????<br>10000</li>
			   </ul>
			 </li>
             <li class="BeautyShop">?????<br>10000</li>
           </ul>
		  </li>
         <li class="BeautyShop">?????<br>10000</li>
		 <li class="BeautyShop">?????<br>15000</li>
       
	   
         <li class="user">??<br>10000
		   <ul>
             <li class="user">??<br>10000
			   <ul>
			      <li class="user">???<br>10000
				    <ul>
			          <li class="BeautyShop">?????<br>10000</li>
			        </ul>
			      <li class="BeautyShop">?????<br>10000</li>
			   </ul>
			 </li>
             <li class="BeautyShop">?????<br>10000</li>
           </ul>
		  </li>
         <li class="BeautyShop">?????<br>10000</li>
		 <li class="BeautyShop">?????<br>15000</li>
       </ul>
     </li>
   </ul>            
    
    <div id="chart" class="orgChart"></div>
    
    <script>
        jQuery(document).ready(function() {
            
            /* Custom jQuery for the example */
            $("#show-list").click(function(e){
                e.preventDefault();
                
                $('#list-html').toggle('fast', function(){
                    if($(this).is(':visible')){
                        $('#show-list').text('Hide underlying list.');
                        $(".topbar").fadeTo('fast',0.9);
                    }else{
                        $('#show-list').text('Show underlying list.');
                        $(".topbar").fadeTo('fast',1);                  
                    }
                });
            });
            
            $('#list-html').text($('#org').html());
            
            $("#org").bind("DOMSubtreeModified", function() {
                $('#list-html').text('');
                
                $('#list-html').text($('#org').html());
                
                prettyPrint();                
            });
        });
    </script>

</body>
</html>